<template>
  <div>
    <ul class="ul" v-if="list.length > 0">
      <li
        v-for="item in list"
        :key="item.id"
        @click="gotoContent(item.id, item.title)"
      >
        <img
          :src="item.cover"
          alt=""
          @touchstart="touchstartEvent(item.id)"
          @touchmove.self="touchmoveEvent"
          @touchend="touchendEvent"
        />
        <div class="title">{{ item.title }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      longpress: 0,
      timeoutEvent: 0,
      bookid: 0,
      booklist: [],
    };
  },

  methods: {
    gettotalBook() {},
    goBookDetail() {
      this.$emit("saveHistory", {
        val: name,
        ishot: true,
        bookid: this.bookid,
      });
      this.$router.push("/detail?sourceUuid=" + this.bookid);
    },
    //点击执行的事件
    gotoContent(id, title) {
      this.$router.push("/content?source_uuid=" + id + "&title=" + title);
    },
    //长按执行的事件
    onlongPress(bookid) {
      this.$emit("onlongPress", { isShowPop: true, bookid: bookid });
    },
    //手指按下屏幕
    touchstartEvent(id) {
      this.timeoutEvent = setTimeout(() => {
        this.longpress = 1;
        this.bookid = id;
        this.onlongPress(id);
      }, 500);

      return false;
    },
    //手指在屏幕滑动
    touchmoveEvent(e) {
      //清除定时器
      clearTimeout(this.timeoutEvent);
      this.timeoutEvent = 0;
      e.preventDefault();
      return false;
    },
    //手指抬起
    touchendEvent(id) {
      clearTimeout(this.timeoutEvent);
      if (this.timeoutEvent != 0 && this.longpress == 0) {
        //执行点击事件
      }
      return false;
    },
  },
};
</script>

<style lang="scss" scoped>
.ul {
  font-size: 14px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
  box-sizing: border-box;
  li {
    width: 28%;
    margin-left: 4%;
    margin-bottom: 10px;
    &:nth-child(3n) {
      margin-right: 0px;
    }
    img {
      width: 100%;
      height: 140px;
    }
    .title {
      margin: 10px 0;
      text-align: justify;
    }
  }
}
</style>